<style lang="less">
  .topModal {
    z-index: 10000;
  }
</style>
<template>
  <!--<Select v-model="currentValue" @input="handleInput" filterable clearable>-->
  <!--<Option v-for="item in data" :value="item.code" :key="item.code">{{ item.name }}</Option>-->
  <!--</Select>-->
  <div>
    <Input v-model="currentValue" readonly>
    <Button slot="append" icon="ios-navigate" @click="showModal" size="small"></Button>
    </Input>
    <Modal  title="选择部门" :transfer="false" class="topModal" v-model="areaModalVisible" :mask-closable='false' :width="300">
      <Tree :data="data" @on-select-change="selectTree"></Tree>
      <Spin size="large" fix v-if="loading"></Spin>
      <div slot="footer">
        <Button type="text" @click="cancel">清除</Button>
        <Button type="primary" @click="select">选择</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { getOrgList, saveOrg,delOrg } from '@/api/data'
  export default {
    name: 'depttree',
    components: {
    },
    data () {
      return {
        currentValue: this.value,
        data: [],
        areaModalVisible:false,
        loading:false,
        selectedNode:{
          code:"",
          title:""
        }
      };
    },
    mounted () {
      this.loadData();
    },
    props: ['value'],
    watch: {
      value(val){
        this.$nextTick(() => this.currentValue = val)
      }
    },
    methods: {
      handleInput() {
        this.$emit('input', this.selectedNode.title);
        this.$emit('select', this.selectedNode);
      },
      selectTree(v) {
        if (v.length > 0) {
          for (let attr in v[0]) {
            if (v[0][attr] === null) {
              v[0][attr] = "";
            }
          }
          let str = JSON.stringify(v[0]);
          let item = JSON.parse(str);

          this.selectedNode = item
        }
      },
      select() {
        if(!this.selectedNode || !this.selectedNode.code){
          return
        }
        this.handleInput()
        this.areaModalVisible = false;
      },
      cancel() {
        this.selectedNode = {code:"",title:""}
        this.handleInput()
        this.areaModalVisible = false;
      },
      showModal() {
        this.areaModalVisible = true;
      },
      loadData() {
        this.loading = true;
//        this.getRequest("/doc/area/getTree?parentid=0").then(res => {
//          this.loading = false;
//          if (res.success === true) {
//            // 仅展开2级
//            if (!this.expandAll) {
//              res.result.forEach(function(e) {
//                if (e.children && e.children.length > 0) {
//                  e.expand = true;
//                  e.children.forEach(function(c) {
//                    if (c.level === 2) {
//                      c.expand = false;
//                    }
//                  });
//                }
//              });
//            }
//            this.data = res.result;
//          }
//        });


        getOrgList().then(res => {
          this.loading = false;
          let data = res.data
          if(data.code == 200){
            this.data = data.data;
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  };
</script>
